// @import './../../design/styles/common/global.styl'

:root {
  --series-count-background-color: #678696
}

.series-item
  margin: 4px
  padding: 0
  max-width: 120px

  .thumbnail
    position: relative
    width: 100%
    background: #282E4E
    border-radius: 2px
    // border: 1px solid #6992FF
    border: var(--ui-border-thickness) solid var(--ui-border-color)
    cursor: pointer
    overflow: hidden

    &.active
      box-shadow: 0 0 2px 1px var(--active-border-color)
      border: 1px solid var(--active-border-color)
      background: linear-gradient(322deg, var(--active-border-color) 0%, var(--active-border-color) 100%)

      .series-information
        .value
          color: #333

    .alt-image-text
      align-items: center
      justify-content: center
      background-color: var(--primary-background-color)
      border: 1px solid var(--ui-border-color-dark)
      height: 100px
      margin: 0 auto
      padding: 5px
      position: relative
      transition: var(--sidebar-transition)
      width: 172px
      display: flex

      h1
        text-align: center
        color: var(--text-primary-color)

    .series-information
      display: flex
      justify-content: space-between
      align-items: center
      padding: 4px

      .item-frames .icon
        height: 18px

      .item-series.image-frames .icon
        // background-color: var(--series-count-background-color)
        position: relative
        margin: 6px 4px 0 0
        background: #eee

        &:after
          content: ''
          // background-color: var(--active-color)
          background: #8DA8FF
          box-shadow: 1px 1px rgba(0, 0, 0, .115)
          left: -4px
          position: absolute
          top: -4px

        &
        &:after
          content: ''
          border: 0px solid var(--series-count-background-color)
          display: inline-block
          height: 8px
          width: 8px

      .item-series.image-number
        max-width: 70%

        .icon
          position: absolute
          top: 7px
          left: 7px
          min-width: 20px
          height: 20px
          padding: 0 4px
          text-align: center
          line-height: 20px
          background: linear-gradient(322deg, #2945D1 0%, #311B7E 100%)
          border: 1px solid rgba(110, 95, 162, .5)
          // border-image: linear-gradient(315deg, rgba(167, 152, 207, 1), rgba(110, 95, 162, 1)) 1 1
          border-radius: 3px

        .value
          width: 100%

      .value
        // color: var(--text-secondary-color)
        display: inline-block
        color: #fff
        font-size: 12px
        // margin-left: 4px
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
        vertical-align: middle

      .icon
        // color: var(--active-color)
        color: #fff
        display: inline-block
        font-size: 12px
